<template>
	<view class="index">
		<view class="bg">
			<view class="search" @tap="toSearch()">
				<uni-icon type="search" ></uni-icon>
				请输入你需要的商品名称
			</view>
		</view>
		
		<!-- 商品分类 -->
		<view class="category">
			
			<view class="list">
			
				<scroll-view class="scroll-cate" scroll-x="true">
					<view  class="cate-item" :class="(searchCate && item.cat_id == topId)?'active':''" @tap="getSonCateAndGoods(item)" v-for="(item,index) in topCategory" :key="index">{{item.cat_name}}</view>
		
				</scroll-view>
			
			</view>
			<view class="list">
			
				<scroll-view class="scroll-cate" scroll-x="true">
					<view  class="cate-item" :class="(searchCate && item.cat_id == sonId)?'active':''" @tap="selectSonCate(item)" v-for="(item,index) in sonCategory" :key="index">{{item.cat_name}}</view>
					
				</scroll-view>
			
			</view>
		</view>
			
		
		<!-- <banner :ad-list="bannerList"></banner> -->
		
		<goods-list :goods="goodsList" :price-name="priceName" goods-type="pdd"></goods-list>
		
	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon.vue';
	import goodsList from '../../components/coupon-goods-list.vue';
	import UniNavBar from '../../components/uni-nav-bar.vue';
	import	banner from '../../components/banner.vue';
	import base from '../../common/base.js';
	import { priceName } from '../../common/config.js';
	import Request from '../../common/request.js';
	
	export default {
		components: {
            uniIcon, goodsList,banner, UniNavBar
        },
		data() {
			return {
				keyword: '',
				page: 1,
				bannerList: [],
				goodsList: [],
				nextPage: true,
				topCategory: [],
				sonCategory: [],
				topId: 0,
				sonId: 0,
				cateId: '',
				searchCate: false
			}
		},
		onLoad() {
			this.searchGoods();
			this.getCategory();
			this.priceName = priceName;
		},
		
		onReachBottom() {
		
			this.searchGoods();
			
		},
		methods: {
	
			//搜索商品
			searchGoods: function(){
				var keyword = this.keyword;
				var that = this;
				var params = {
					url: 'pdd/goodsList',
					data: {
						page: that.page, 
						keyword:keyword,
						cate_id: that.cateId
					},
					sCallback: function(res) {
						
							that.goodsList = that.goodsList.concat(res.data);
							that.page ++; 
							if(res.data.length < 20) {
								that.nextPage = false
							}
				
						
						
					}
				}
				Request.send(params);
			},
			
			//搜索
			search: function(){
				var that = this;
				this.goodsList = [];
				this.page = 1;
				this.nextPage = true;
				this.searchGoods();
			},
			toSearch: function(){
				uni.navigateTo({
					url: '/pages/coupon/search?type_index=2'
				})
			},
			//获取商品分类
			getCategory: function(){
				var that = this;
				var params = {
					url: 'pdd/goodsCatsGet',
					data: {
						pid: that.topId
					},
					sCallback: function(res) {
						if(that.topId == 0) {
							that.topCategory = res;
						} else {
							that.sonCategory = res;
						}
					}
				}
				Request.send(params);
			},
			//获取下级分类及商品
			getSonCateAndGoods: function(item) {
				if(this.topId == item.cat_id) {
					this.searchCate = false;
					this.cateId = '';
					this.topId = 0;
					this.sonCategory = [];
				} else {
					this.searchCate = true;
					this.cateId = item.cat_id;
					this.topId = item.cat_id;
				}
							
				this.page = 1;
				this.nextPage = true;
				this.goodsList = [];
				this.getCategory();
				this.searchGoods();
			},
			//选择了二级分类
			selectSonCate: function(item){
				if(this.sonId == item.cat_id) {
					this.searchCate = false;
					this.cateId = '';
					this.topId = 0;
					this.sonId = 0;
				} else {
					this.searchCate = true;
					this.cateId = item.cat_id;				
					this.sonId = item.cat_id;
				}
				
				this.page = 1;
				this.nextPage = true;
				this.goodsList = [];
				
				this.searchGoods();
			},
		}
	}
</script>

<style>
	view{
		display: flex;
		font-size: 26upx;
	}
	
	
	.index{
		width: 100%;
		flex-direction: column;
		background: #F5F5F5;
		
	}
	
	.bg{
		background: linear-gradient(to right, #FC5E5D 0, #FE1010 100%);
		padding: 60upx 0;
		justify-content: center;
	}
	
	.bg .search{
		background: #fff;
		height: 60upx;
		align-items: center;
		padding: 0 40upx;
		border-radius: 30upx;
		width: 80%;
		color: #929393;
	}

	/* 分类开始 */
		.category{
			background: #fff;
			/* height: 80upx; */
			line-height: 80upx;
			border-bottom: 1upx solid #eee;
			width: 750upx;
			flex-direction: column;
		}
		
	
		.category .list{
			width: 750upx;
			overflow: hidden;
			padding-right:30upx;
		}
	
		.category .scroll-cate {
			white-space: nowrap;
			
		}
	
	
		.category .cate-item {
			display: inline-block;
			flex: 1;
			padding: 0 30upx;
			text-align: center;
			
		}
		
		.category .active {
			color: #FC3F78;
		}
		
		.category .more{
			color: #999;
			width: 100upx;
			justify-content: center;
			align-items: center;
		}
		
		.category .more text{
			border-left: 1upx solid #eee;
			width: 100upx;
			text-align: center;
			line-height: 40upx;
			height: 40upx;
		}
	/* 分类结束 */
</style>
